﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta name="keywords" content="CDN" />
		<meta name="description" content="CDN 服务器状态监控 CopyRight CDN-Bestv" />
		<title id='Description'>
			CDN 服务器状态监控 CopyRight CDN-Bestv
		</title>
		<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
		<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../scripts/demos.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
		<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				// Create jqxTabs.
				$('#jqxTabs').jqxTabs({
					width: '90%',
					height: 700,
					position: 'top'
				});
				$('#settings div').css('margin-top', '10px');
				var url = "/myjqx/PHP/serverlist.php";
				// prepare the data
				var source = {
					datatype: "json",
					datafields: [{
						name: 'name'
					}, {
						name: 'ipaddr'
					}, {
						name: 'diskfree',
						type: 'float'
					}],
					id: 'id',
					url: url,
				};
				var dataAdapter = new $.jqx.dataAdapter(source);
				var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
						if (value < 30) {
							return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
						} else {
							return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
						}
					}
					// Create jqxGrid
				$("#jqxgrid").jqxGrid({
					width: '100%',
					height: '100%',
					source: dataAdapter,
					showtoolbar: true,
					rendertoolbar: function(toolbar) {
						var container = $("<div style='margin: 5px;'></div>");
						toolbar.append(container);
						container.append('<input id="addrowbutton" type="button" value="新增" />');
						container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="删除" />');
						$("#addrowbutton").jqxButton();
						$("#deleterowbutton").jqxButton();
						// delete row.                   
						$("#deleterowbutton").on('click', function() {
							var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
							var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
							if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
								var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
								var commit = $("#jqxgrid").jqxGrid('deleterow', id);
							}
						});
					},
					columnsresize: true,
					selectionmode: 'multiplecellsadvanced',
					sortable: true,
					columns: [{
						text: '服务器名称',
						datafield: 'name',
						width: 250
					}, {
						text: 'IP地址',
						datafield: 'ipaddr',
						width: 250
					}, {
						text: '磁盘剩余',
						datafield: 'diskfree',
						cellsalign: 'right',
						cellsrenderer: cellsrenderer,
						width: 180
					}, ]
				}); //jqxgrid end
			});
		</script>
	</head>

	<body class='default'>
		<div id='jqxWidget'>
			<div id='jqxTabs'>
				<ul>
					<li style="margin-left: 30px;">CDN服务器状态</li>
					<li>Perl</li>
				</ul>
				<div id='jqxgrid'>
				</div>
				<div>
					11
				</div>
			</div>

		</div>
	</body>

</html>